<template>
    <div class="insurance-inspection">
        <nav-header>
			<div class="zh-h5-nav">
				<div 
					:class="activePanel === 'insuraace' ? 'active' : ''"
					@click="changePanel('insuraace')">强险提醒</div>
				<div 
					:class="activePanel === 'business' ? 'active' : ''"
					@click="changePanel('business')">商业保险提醒</div>
                <div 
                :class="activePanel === 'annual' ? 'active' : ''"
                @click="changePanel('annual')">年检提醒</div>
			</div>
		</nav-header>

        <transition name="fade" mode="out-in" v-if="activePanel === 'insuraace'">
            <div class="zh-table">
                <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
                        <div class="open-width" style="width: 150px">
                            <el-select v-model="listParam.timeId" filterable placeholder="请选择到期时间">
                                <el-option
                                    v-for="item in timeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="open-width" style="width: 120px">
                            <el-select v-model="listParam.modeId" filterable placeholder="请选择车型">
                                <el-option
                                    v-for="item in modelList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        
                        <div class="open-width">
                            <el-input v-model="listParam.keyword" @keyup.enter.native="searchFunc" placeholder="搜索厂牌型号、车牌号"></el-input>
                        </div>
                        <el-button type="primary" @click="searchFunc">搜索</el-button>
                        <el-button type="primary" @click="resetList">重置</el-button>
                    </div>
                    <div class="zh-open-right fr">
                        <el-button type="danger" @click="handleAllConfirm">批量处理</el-button>
                    </div>
                </div>

                <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <el-table
                        :data="listData"
                        fixed
                        border
                        max-height="600"
                        @selection-change="tableSelectionChange"
                        style="width: 100%">
                        <el-table-column
                            type="selection"
                            width="50"
                            align="center"
                            fixed>
                        </el-table-column>
                        <el-table-column
                            prop="brand"
                            label="厂牌型号"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="number"
                            label="车牌号"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="type_name"
                            label="车型"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="车辆性质"
                            align="center"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.property === 1 ? '职务配车' : '公务用车'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="dead_line"
                            label="到期时间"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="状态"
                            align="center"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{stateList[scope.row.status - 1]}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            :width="120">
                            <template slot-scope="scope">
                                <el-button @click="handleRowConfirm(scope.row)" type="text">处理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="table-pagination" v-show="totalNumber > 10">
                        <el-pagination
                            @size-change="changeCurrentSize"
                            @current-change="changeCurrentPage"
                            :current-page="listParam.pageIndex"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNumber">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </transition>
        
        <transition name="fade" mode="out-in" v-if="activePanel === 'business'">
            <zh-business-insurance :modelList="modelList" />
        </transition>

        <transition name="fade" mode="out-in" v-if="activePanel === 'annual'">
            <zh-annual-inspection :modelList="modelList" />
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            rowLen: 0, // 要处理数据的长度
            totalNumber: 0, // 总条数
            activePanel: 'insuraace', // 默认标签
            listData: [], // 提醒列表
            selected: [], // 选中的数据
            modelList: [{id: 0, name: '全部车型'}], // 车型列表
            timeList: [{id: 1, name: '一周内', time: 7}, {id: 2, name: '一月内', time: 30}, {id: 3, name: '两月内', time: 60}], // 状态列表
            stateList: ['使用中', '闲置', '停用', '损坏', '报废'], // 车辆状态
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
            listParam: {
                timeId: null,
                modeId: 0, // 车型id
                keyword: undefined,
                pageSize: 10,
                pageIndex: 1
            },
        }
    },
    created() {
        this.getList();
        this.getModel();
    },
    methods: {
        /**
         * 获取强险提醒列表
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            let dead_line = undefined;
            
            if (this.listParam.timeId) {
                dead_line = this.timeList.filter(item => item.id == this.listParam.timeId)[0].time;
            }

            let param = {
                type: 1,
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
                car_type: this.listParam.modeId,
                keyword: this.listParam.keyword,
                dead_line
            }

            this.$ajax.get('api/car/insurancelists', {params: param, func:{success: success}})
        },
        /**
         * 获取车型列表
         */
        getModel() {
            const success = (res=>{
                this.modelList = res.data;
                this.modelList.unshift({
                    id: 0, 
                    name: '全部车型'
                })
            })
            const params = {
                in_use: 0 // 是否已有汽车类型（1：是，0：否（默认））
            }

            this.$ajax.get('api/car/typelists', {func: {success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 重置列表
         */
        resetList() {
            this.listParam = {
                timeId: null,
                modeId: 0,
                keyword: undefined,
                pageSize: 10,
                pageIndex: 1
            }

            this.getList();
        },
        /**
         * 是否处理该数据
         * @param {Number} id 要处理数据的 id
         */
        handleRowConfirm(item) {
            let yes = (res => {
                this.rowLen = 1;

                let arr = [{
                    car_id: item.id,
                    car_number: item.number
                }]

                this.handleData(arr);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '续期一年，是否继续'});
        },
        /**
         * 是否确定批量处理
         */
        handleAllConfirm() {
            if(this.selected.length === 0) {
                this.$message.warning("请选择要处理的项");
                return false;
            }

            let yes = (res => {
                let ids = [];
                this.rowLen = this.selected.length;

                this.selected.forEach(item => {
                    ids.push({
                        car_id: item.id,
                        car_number: item.number
                    });
                })

                this.handleData(ids);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '批量处理续期一年，是否继续'});
        },
        /**
         * 处理数据
         * @param {Number/Array} 要处理数据的 id
         */
        handleData(item) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.listData.length === this.rowLen) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                let note = '';
                let msg = res.msg;

                if (Array.isArray(msg)) {
                    msg.forEach(item => {
                        note += item + '<br/><br/>';
                    })
                }

                this.$message({
                    type: 'error',
                    dangerouslyUseHTMLString: true,
                    message: note
                });

                this.getList();
            }) 
            let params = {
                car: item,
                type: 1
            }

            this.$ajax.post('api/car/insurance', params, {func: {success: success, fail: fail}})
        },
        /**
         * 切换标签页
         * @param {String} name 标签名字
         */
        changePanel(name) {
            this.activePanel  = name;

            if (name === 'insuraace') {
                this.resetList();
            }
        },
        /**
         * 列表数据多选
         * @param {Array} val 选中数据的数组
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.insurance-inspection {
    
}
</style>